<template>
  <div class="left-nav-box">
    <!-- <header class="base-header-title base-title-font">DAG图编辑器</header> -->
    <!-- <el-input
      v-model="searchValue"
      class="search-input"
      placeholder="search"
      @change="searchStencil"
    ></el-input> -->
    <!-- <header class="base-header-title base-title-font">基础操作</header> -->
    <p class="task-name">{{ taskName }}</p>
    <main id="stencil-container" class="list-box">
      <!-- <el-menu :default-active="$route.meta.name" class="el-menu-vertical"> -->
      <el-menu class="self-menu dag-menu" :unique-opened="true" active-text-color="#8492C2">
        <div v-for="(item, index) in dataList" :key="index">
          <el-submenu :index="'a' + index" v-if="item.children">
            <template slot="title">
              <!-- <i :class="['nav-icon', item.icon]"></i> -->
              <span slot="title" class="list-item">{{ groupNavMap[item.label] }}</span>
            </template>
            <!-- <el-menu-item v-for="(e, i) in inMetaFilter(e.children)" :key="i" -->
            <el-menu-item v-for="(e, i) in item.children" :key="i" :index="'b' + i">
              <div @mousedown="DragStencil(e.value, $event)" class="list-item">
                {{ e.label }}
              </div>
            </el-menu-item>
          </el-submenu>
          <div v-else class="list-item" @mousedown="DragStencil(item.value, $event)">
            {{ item.label }}
          </div>
        </div>
      </el-menu>
      <!-- <div
        v-for="item in dataList"
        :key="item.value"
        class="list-item"
        @mousedown="DragStencil(item.value, $event)"
      >
        <div>

        </div>
        <div>
          
        </div>
        {{ item.label }}
      </div> -->
    </main>
  </div>
</template>

<script>
import { cloneDeep } from "lodash";
// import DagGraph from "../../graph";
import DagGraph from "@/views/dag/dagEdit/graph";
import { initformData } from "@/views/dag/dagEdit/const/config";
import { getModule } from '@/api/dag'
import { bus } from "@/main";
import { groupNavMap } from "@/utils/maps"

// import { initformData, stencilList } from "../../const/config";

export default {
  name: "StencilTree",
  data() {
    return {
      groupNavMap,
      searchValue: ""
    };
  },
  props: ['taskName'],
  asyncComputed: {
    async dataList() {
      let res = await getModule()
      console.log(res)
      // let categoryLis = ['analyse_data', 'customize', 'data_pre_handle', 'evaluate_model', 'feature_engineering', 'machine_learning_model', 'read_data', 'text_analysis', 'view_data', 'visualize', 'write_data']
      let categorys = Array.from(new Set(res.data.map(ele => ele.category)))

      console.log(categorys)
      let categorysClassify = []

      categorys.forEach(e => {
        let children = []
        res.data.forEach((ele, index) => {
          if (ele.category == e) {
            children.push({
              label: ele.name,
              value: ele.category + index,
              id: ele.id,
              ports: ele.ports,
              data: ele
            })
          }
        })
        categorysClassify.push({
          label: e,
          value: e,
          children
        })
      })

      // let list = cloneDeep(res.data).map(e => {
      //   return {
      //     label: e.name,
      //     value: e.category,
      //     id: e.id
      //   }
      // })
      let value = this.searchValue;
      let listRes = categorysClassify.filter((item) => item.label.includes(value));
      bus.$emit('categorysClassify', categorysClassify)
      console.log(listRes)
      console.log(categorysClassify)
      return listRes
    }
  },
  async mounted() {
    DagGraph.initStencilTree("stencil-container");
  },
  methods: {
    // 拖拽事件
    DragStencil(shape, event) {
      const { dnd, graph } = DagGraph;
      console.log(cloneDeep(initformData[shape]))
      let node = graph.createNode({
        shape: shape,
        data: cloneDeep(initformData[shape])
      });
      console.log(event)
      dnd.start(node, event);
    },
    // 搜索模型
    searchStencil() { }
  }
};
</script>

<style lang="less" scoped>
.task-name {
  line-height: 44px;
  text-align: center;
}

.left-nav-box {
  height: 100%;
}

.list-box {
  // margin-left: 30px;
  // margin-top: 7px;
  height: calc(100vh - 44px);
  overflow-y: auto;
  overflow-x: hidden;

  &::-webkit-scrollbar {
    width: 6px;
  }

  /* 滚动槽 */
  &::-webkit-scrollbar-track {
    box-shadow: inset006pxrgba(255, 255, 255, 0.3);
    border-radius: 10px;
  }

  /* 滚动条滑块 */
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset006pxrgba(255, 255, 255, 0.5);
  }

  &::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255, 255, 255, .06);
  }
}

.list-item {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #606266;
  cursor: move;
  background: rgba(0, 0, 0, 0);
}

.self-menu {
  // background: rgba(0, 0, 0, 0);
  // border-color: rgba(0, 0, 0, 0);
  background: #FFF;

  /deep/ .el-submenu__title {
    background: rgba(0, 0, 0, 0);
  }

  /deep/ .el-menu {
    background: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0);

    .el-menu-item {
      background: rgba(0, 0, 0, 0);
    }
  }
}
</style>
